<template>
  <div class="wrapper">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <div class="square-widget">
            <div class="widget-container">
              <div class="row state-overview">
                <div data-toggle="1" class="col-md-4 col-xs-12 col-sm-4 current-step">
                  <div class="panel purple">
                    <div class="symbol"><i class="fa fa-gavel"></i></div>
                    <div class="state-value">
                      <div class="value">车辆违法查询</div>
                    </div>
                  </div>
                </div>
                <div data-toggle="2" class="col-md-4 col-xs-12 col-sm-4">
                  <div class="panel purple">
                    <div class="symbol"><i class="fa fa-gavel"></i></div>
                    <div class="state-value">
                      <div class="value">驾驶人违法查询</div>
                    </div>
                  </div>
                </div>
                <div data-toggle="3" class="col-md-4 col-xs-12 col-sm-4">
                  <div class="panel purple">
                    <div class="symbol"><i class="fa fa-gavel"></i></div>
                    <div class="state-value">
                      <div class="value">驾驶人信息查询</div>
                    </div>
                  </div>
                </div>
              </div>
              <form id="default" class="form-horizontal">
                <fieldset title="Initial Info" class="Initial" v-bind:class="{step:set==1}">
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">车牌号</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.hphm" placeholder="车牌号" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">号牌种类</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.hpzl" placeholder="号牌种类" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">车辆识别号后六位</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.clsbdh" placeholder="车辆识别号后六位" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label"></label>
                    <div class="col-md-6 col-sm-6" style="text-align:right">
                      <a v-on:click="get_car_wf()" class="  btn btn-info">查询</a>
                    </div>
                  </div>
                </fieldset>
                <fieldset title="Initial Info" class="Initial" v-bind:class="{step:set==2}">
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">驾驶证号</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.sfzhm" placeholder="驾驶证号" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">档案编号</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.dabh" placeholder="档案编号" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label"></label>
                    <div class="col-md-6 col-sm-6" style="text-align:right">
                      <a v-on:click="get_jsr_wf()" class="  btn btn-info">查询</a>
                    </div>
                  </div>
                </fieldset>
                <fieldset title="Initial Info" class="Initial" v-bind:class="{step:set==3}">
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">驾驶证号</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.sfzhm" placeholder="驾驶证号" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label">档案编号</label>
                    <div class="col-md-6 col-sm-6">
                      <input type="text" v-model="form.dabh" placeholder="档案编号" class="form-control">
                    </div>
                  </div>
                  <div class="form-group">
                    <label class="col-md-2 col-sm-2 control-label"></label>
                    <div class="col-md-6 col-sm-6" style="text-align:right">
                      <a v-on:click="get_jsr_info()" class="  btn btn-info">查询</a>
                    </div>
                  </div>
                </fieldset>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a href="#myModal3" data-toggle="modal" style="display:none" class="btn btn-danger " id="alert"> </a>
    <div aria-hidden="false" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="myModal3" class="modal fade">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
            <h4 class="modal-title">Modal Tittle</h4>
          </div>
          <div class="modal-body">
            <ul>
              <li v-for="(key,val) in jsr_info">
                 {{val}}
              </li>
            </ul>
          </div>
          <div class="modal-footer">
            <button aria-hidden="true" data-dismiss="modal" class="close" type="button"> 确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style>
  .state-overview .col-md-4{
    cursor:pointer;
  }
  .current-step .purple{
    background-color:#9cb6fe;
    box-shadow:0 5px 0 #bbcdff;
  }
  .Initial{
    display:none;
  }
  .step{
    display:block;
  }
</style>
<script>
  export default{
    data(){
      return {
        form: {
          hphm: '',
          hpzl: '',
          clsbdh: '',
          sfzhm: '',
          dabh: ''
        },
        tab: null,
        set: 1,
        car_wf: [],
        jsr_wf: [],
        jsr_info: [],
      }
    },
    mounted: function(){
      this.clickTab();
    },
    updated: function(){
    },
    created: function(){
    },
    methods: {
      open( msg, type ) {
        this.$message( {
          message: msg,
          type: type
        } );
      },
      clickTab(){
        var _self = this;
        $( '.state-overview .col-sm-4' ).click( function(){
          $( '.state-overview .col-sm-4' ).removeClass( 'current-step' )
          $( this ).addClass( 'current-step' );
          _self.set = $( this ).attr( 'data-toggle' );
        } )
      },
      get_car_wf(){
        this.load.loading2( true, '查询中请稍等.....' )
        this.$http.post( '/home/car/getCarWf', { data: this.form } ).then( function( response ){
          this.load.loading2( false, '' )
          if( response.data.status == '0' && typeof response.data.data !== undefined ){
            $( '#alert' ).trigger( 'click' );
            this.data = response.data.data
          }else{
            this.open( '查询失败，请核对信息', 'warning' );
          }
        }, function( response ){
          this.open( '网络错误', 'warning' )
          this.load.loading2( false, '' )
        } ).bind( this );
      },
      get_jsr_wf(){
        this.load.loading2( true, '查询中请稍等.....' )
        this.$http.post( '/home/car/getJsrWf', { data: this.form } ).then( function( response ){
          this.load.loading2( false, '' )
          if( response.data.status == 0 ){
            $( '#alert' ).trigger( 'click' );
            this.data = response.data.data
            return;
          }else{
            this.open( '查询失败，请核对信息' );
          }
        }, function( response ){
          this.open( '网络错误', 'warning' )
          this.load.loading2( false, '' )
        } ).bind( this );
      },
      get_jsr_info(){
        this.load.loading2( true, '查询中请稍等.....' )
        this.$http.post( '/home/car/getJsrInfo', { data: this.form } ).then( function( response ){
          this.load.loading2( false, '' )
          console.log( response.data.status );
          if( response.data.status == 'true' ){
            $( '#alert' ).trigger( 'click' );
            this.jsr_info = response.data.data
          }else{
            console.log( response.data.data );
            this.open( response.data.data, 'warning' );
          }
        }, function( response ){
          this.open( '网络错误', 'warning' )
          this.load.loading2( false, '' )
        } ).bind( this );
      },
      getUserInfo: function(){
      }
    }
  }
</script>